<template>
    <div class="top" style="background: #fff; padding: 8px 6px">
        <div class="modelBox">
            <div class="header">
                <div class="title">待办任务</div>
                <div class="add" @click="addItem">增加</div>
            </div>
            <div id="list-group-item">
                <div class="list-group-item" v-for="item in list" :key="item.name">
                    <div class="item" @click.stop="deleteItem(item)">{{ item.name }}</div>
                </div>
            </div>
            <input v-show="showadditem" v-model="title" type="text" @keyup.enter="submit" />
            <div style="color: #aaa; font-size: 12px">点击删除</div>
        </div>
        <div class="tabs" style="width: 800px">
            <FullCalendar ref="fullCalendar" :options="calendarOptions" class="demo-app-calendar" />
        </div>
    </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin, { Draggable } from '@fullcalendar/interaction';

export default {
    name: 'DomeFullcalendar',
    components: {
        FullCalendar,
    },
    data() {
        return {
            eventEl: null,
            calendarOptions: {
                //?拖拽日历配置
                plugins: [dayGridPlugin, interactionPlugin],
                firstDay: 1, // 把每周设置为从周一开始
                header: {
                    // 日历头部
                    left: 'prev,next today',
                    center: 'title',
                    right: 'custom',
                },
                /* 设置按钮文字 */
                buttonText: {
                    today: '今天',
                },
                // 点击事件对象事件
                eventClick: this.handleEventClick,
                initialView: 'dayGridMonth',
                locale: 'zh-cn', //? 配置中文
                selectable: true, //可编辑
                dayMaxEvents: true,
                slotMinutes: 15,
                editable: true, // 日历上是否可拖拽
                droppable: true,
                dropAccept: '.list-group-item',

                events: [],
            },
            list: [
                { id: 1, name: '春节放假' },
                { id: 2, name: '中秋节放假' },
                { id: 3, name: '游玩' },
            ],
            showadditem: false,
            title: '',
        };
    },

    mounted() {
        var containerEl = document.getElementById('list-group-item');
        // 初始化外部事件
        new Draggable(containerEl, {
            itemSelector: '.list-group-item',
            eventData: function (eventEl) {
                return {
                    title: eventEl.innerText,
                };
            },
        });
    },

    methods: {
        handleEventClick(clickInfo) {
            if (confirm(`确定删除吗 '${clickInfo.event.title}'`)) {
                clickInfo.event.remove();
            }
        },

        deleteItem(item) {
            if (confirm(`确定删除吗 '${item.name}'`)) {
                this.list = this.list.filter(data => {
                    return data.id != item.id;
                });
            }
        },

        addItem() {
            this.showadditem = true;
        },
        submit() {
            this.showadditem = false;
            this.list.push({
                id: new Date(),
                name: this.title,
            });
            this.title = '';
        },
    },
};
</script>

<style lang="scss" scoped>
.top {
    display: flex;
    .modelBox {
        width: 200px;
        cursor: pointer;
    }
    .tabs {
        margin-left: 20px;
    }
}
.header {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    .title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
    }
    .add {
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 0;
        font-size: 14px;
        width: 60px;
        height: 28px;
        border-radius: 20px;
        background-color: aqua;
        margin-left: 20px;
    }
}
.list-group-item {
    cursor: pointer;
    margin-bottom: 5px;
    .item {
        display: inline-block;
        padding: 10px;
        background-color: #ebeef5;
        font-size: 14px;
    }
}
</style>
